<template>
	<view class="pagebox">
		<view class="navbox" :style="{height:`${obj.wh.navHeight}px`}">
			<view class="status" :style="{height:`${obj.wh.statusBarHeight}px`}"></view>
			<view class="navigation" :style="{height:`${obj.wh.navigationBarHeight}px`,width:`${obj.wh.custom.left}px`}">
				<image class="returnicon" src="../static/7.png" mode="aspectFill" @click="proxy.$c.go_url('','navigateBack',1)"></image>
			</view>
		</view>
		<template v-if="obj.d">
			<!-- banner -->
			<view class="bannerbox flex-center">
				<template v-if="obj.bannertabs.length">
					<template v-if="obj.bannertabs[obj.banneridx]=='视频'">
						<swiper class="swiper" circular>
							<swiper-item class="swiper-item" v-for="(v,i) in obj.d.imgs.videos" :key="i">
								<video :src="v" class="w100 h100"></video>
							</swiper-item>
						</swiper>
					</template>
					<template v-if="obj.bannertabs[obj.banneridx]=='照片'">
						<swiper class="swiper" circular>
							<swiper-item class="swiper-item" v-for="(v,i) in obj.d.imgs.albums" :key="i">
								<image :src="v" mode="widthFix" @click="preimage(i)"></image>
							</swiper-item>
						</swiper>
					</template>
					<view class="bannertabs flex-row-center">
						<view v-for="(v,i) in obj.bannertabs" :key="i" :class="['bannertab flex-center',obj.banneridx==i?'bannertabact':'']" @click="obj.banneridx=i">{{v}}</view>
					</view>
				</template>
				<video v-else style="width: 100vw;height: 750rpx;" autoplay src="http://silkscreen.file.zhhost.top/130200_1729833682.mp4"></video>
				<!-- <image v-else style="width: 100vw;height: 750rpx;" src="../static/45.png" mode="aspectFill"></image> -->
			</view>
			
			<view class="combox flex-row pd30-column">
				<view class="imgbox ml30"> <image src="../static/42.png" mode="aspectFill"></image> </view>
				<view class="flex-column">
					<view class="name mb10">{{obj.d.name}}</view>
					<view class="flex-row-center">
						<image class="descicon" src="../static/43.png" mode="widthFix"></image>
						<text class="desc">河北 安平 17年经营经验</text>
					</view>
					<view class="desc">提供质保服务 深度定制</view>
				</view>
			</view>
			
			<!-- tab -->
			<view class="tabbox flex-row-center pd30-row">
				<view :class="['tab flex-center',obj.tabidx==i?'tabactive':'']" v-for="(v,i) in obj.tabs" :key="i" @click="obj.tabidx=i">{{v}}</view>
			</view>
			
			<view style="width: 100vw;height: 22rpx;background: #F2F3F6;"></view>
			
			<view v-if="obj.tabidx==0" class="pd30">
				<u-parse noData="暂无内容" className="u-parse" :content="obj.d.detail||''" :imageProp="obj.imageProp"></u-parse>
			</view>
			
			<template v-if="obj.tabidx==1">
				<view class="detailcard">
					<view class="flex-row mb20">
						<view class="label">联系人</view>
						<view class="labelc">{{'刘经理'}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">手 机</view>
						<view class="labelc">{{'13031031133'}}  <text class="clicktext" @click="callphone('13031031133')">拨打</text> </view>
					</view>
					<view class="flex-row mb20">
						<view class="label">座 机</view>
						<view class="labelc">{{'023-1341223'}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">电子邮箱</view>
						<view class="labelc">{{'45770123@qq.com'}}</view>
					</view>
					<view class="flex-row mb20">
						<view class="label">微 信</view>
						<view class="labelc">{{'13031031133'}} <text class="clicktext" @click="copy('13031031133')">复制</text> </view>
					</view>
					<view class="flex-row mb20">
						<view class="label">公司地址</view>
						<view class="labelc">{{'河北省衡水市安平县高新技术开发区经五路18号'}}</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import uParse from '@/components/u-parse/u-parse.vue'
	import { onLoad } from '@dcloudio/uni-app'
    let { proxy } = getCurrentInstance()
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		d: null,
		bannertabs: [],
		banneridx: 0,
		tabs: ['企业介绍','联系我们'],
		tabidx: 0,
	})
	
	onLoad((opt)=>{
		if(!opt.id){
			uni.showToast({title: '供应商获取失败！',icon: 'none'})
			uni.navigateBack({delta:1})
		}
		obj.d = opt
		obj.d.detail = `    安平县瑞佳网业有限公司（原安平县万兴织网厂）的两代人创业人是安平众多丝网工匠之一，近40年以来，专注于埋头研究高目数不锈钢丝网（筛网）的生产与技术研发，从1983年的50平米小作坊，一台木织机；1998年在全国率先生产500目、400目不锈钢筛网，2007年正式成立瑞佳网业，至今已拥有200余台自动化数控织网设备，10000平米标准化生产车间，年产60万平米高目数不锈钢筛网，企业信用评级AAA级信用企业，河北省科技型中小企业，工匠精神明星企业，安平县质量体系标杆企业。`
	})
	
	const callphone=(phone)=>{
		uni.makePhoneCall({
			phoneNumber: phone
		});
	}
	
	const copy=(phone)=>{
		uni.setClipboardData({
			data: phone,
			success: function () {
				console.log('success');
			}
		});
	}
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw; height: 100vh; background: #fff; overflow-y: auto;
	padding-bottom: 140rpx;box-sizing: border-box;
	.navbox{
		position: fixed;left: 0;top: 0;z-index: 999999;width: 100vw;
		.status{width: 100vw;}
		.navigation{
			width: 100vw;
			padding: 0 30rpx;box-sizing: border-box;
			display: flex;flex-direction: row;align-items: center;
			.returnicon{width: 50rpx;height: 50rpx;}
		}
	}
	.bannerbox{
		position: relative;
		width: 100vw;height: 750rpx;background: #f0f0f0;
		.swiper,.swiper-item{
			width: 100vw !important;height: 750rpx !important;
			.video{width: 100%;height: 100%;}
			image{width: 100%;height: 100%;}
		}
		.bannertabs{
			position: absolute;left: 50%;bottom: 30rpx;margin-left: -75rpx;
			width: 200rpx;height: 60rpx;border-radius: 60rpx;background-color: rgba(235,235,235,0.3);
			padding: 10rpx;box-sizing: border-box;
			.bannertab{width: 90rpx;height: 45rpx;border-radius: 45rpx;background-color: rgba(255,255,255,0);font-size: 22rpx;color: #000;}
			.bannertabact{background-color: rgba(255,255,255,1);font-weight: bold;}
		}
	}
	.banner{width: 100vw;height: 460rpx;}
	.basebox{
		background: #F4F4F4;border-radius: 13rpx;
		.pre_l{width: 100rpx;height: 44rpx; font-size: 24rpx; line-height: 24rpx; color: #333;}
		.pre_b{height: 24rpx;}
		.special_price{font-size: 36rpx; line-height: 36rpx; font-weight: bold;color: #333;height: 44rpx;}
		.min_nums{font-size: 24rpx; line-height: 24rpx; color: #333;height: 24rpx;}
		.rollicon{width: 30rpx;height: 30rpx;margin-left: 10rpx;opacity: 0.6;}
	}
	.protitle{font-size: 28rpx;}
	.warningdesc{
		width: 100%;border-radius: 13rpx;background: #FCF8F1;font-size: 22rpx;color: #A46421;
		.icon{width: 30rpx;height: 30rpx;margin-right: 10rpx;}
	}
	.combox{
		width: 100vw;background-color: #fff;
		.imgbox{width: 120rpx;height: 120rpx; margin-right: 20rpx; image{width: 100rpx;height: 100rpx;}}
		.name{font-size: 27rpx;font-weight: bold;color: #111111;}
		.descicon{width: 80rpx;}
		.desc{font-size: 22rpx;font-weight: 500;color: #333;}
	}
	.tabbox{
		background: #fff;height: 70rpx;
		.tab{font-size: 28rpx;color: #333;flex: 1;height: 70rpx;}
		.tabactive{font-weight: bold;color: #333;position: relative;}
		.tabactive::before{
			content: '';position: absolute;z-index: 1;display: block;
			left: 50%;bottom: 0;width: 160rpx;margin-left: -80rpx;height: 4rpx;background-color: #000;
		}
	}
	.detailcard{
		padding: 30rpx;background-color: #fff;
		.labeltitle{font-size: 29rpx;font-weight: bold;}
		.label{width: 120rpx;font-size: 25rpx;color: #666;}
		.labelc{flex: 1;font-size: 25rpx;color: #333;font-weight: bold;}
		.clicktext{font-size: 25rpx;color: #4692CC;font-weight: 400;}
	}
	.proitem{
		width: 330rpx;margin-right: 30rpx;border-radius: 25rpx;overflow: hidden;
		margin-bottom: 40rpx;
		.swiper,.swiper-item{
			width: 330rpx !important;height: 330rpx !important;border-radius: 15rpx;overflow: hidden;
			image{width: 100%;height: 100%;}
		}
		.coverbox{width: 330rpx;height: 330rpx;border-radius: 25rpx;overflow: hidden; background-color: #f0f0f0;border: solid 1rpx #f3f3f3;box-sizing: border-box;}
		.cover{width: 100%;height: 100%;}
		.itemtitle{font-size: 27rpx;color: #333;font-weight: 400;}
		.price{font-size: 38rpx;color: #333;font-weight: bold;}
		.min_nums{font-size: 27rpx;color: #333;font-weight: 400;}
	}
	.proitem:nth-child(2n){margin-right: 0;}
	.nodata{width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;border-radius: 10rpx;background: #f0f0f0;font-size: 22rpx;color: #999;}
	
	.bottombox{
		position: fixed;left: 0;bottom: 0; z-index: 99; width: 100vw;height: 140rpx;background: #fff;box-shadow: 0 -10rpx 10rpx 10rpx rgba(0,0,0,0.05);
		.bicon{width: 50rpx;height: 50rpx;}
		.bt{font-size: 26rpx;margin-top: 10rpx;}
		.button{flex: 1;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;}
	}
}

::v-deep .wxParse image{width: 100% !important;}
::v-deep .wxParse video{width: 100% !important;}
::v-deep .u-parse view{font-size: 28rpx;}
</style>
